<template>
  <div class="DepartmentTree">
    <breadcumb :item="breadcumbLists" @changeSelected="_changeSelected" />
    <ul id="ulText">
      <li v-for="(v,i) in deptLists" :key="i">
        <department-list :item="v" @AgreeSelected="_AgreeSelected" @LoadChildrens="_loadChildrens" />
      </li>
    </ul>
  </div>
</template>

<script>
import { deptApi } from '@/api/dept'
export default {
  name: 'DepartmentTree',
  components: {
    Breadcumb: require('@/components/common/department/breadcrumb').default,
    DepartmentList: require('@/components/common/department/list').default
  },
  data() {
    return {
      breadcumbLists: [],
      deptLists: []
    }
  },
  mounted () {
    debugger
    this.getList('ROOT')
    /* this.$nextTick(function() {
      this.$on('childmethods', function() {
        debugger
        this.initLoading()
      })
    })*/
  },
  activated() {
  },
  methods: {
    initLoading() {
      debugger
      var brLength = this.breadcumbLists.length
      if (brLength === 0) {
        this.getList('ROOT')
      } else {
        this.getList(this.breadcumbLists[brLength - 1].deptcode)
      }
    },
    _changeSelected(id) {
      console.log('index id=' + id)
      debugger
      if (id === 'ROOT') {
        this.breadcumbLists = []
      } else {
        var dlist = []
        for (var i = 0; i < this.breadcumbLists.length; i++) {
          dlist.push(this.breadcumbLists[i])
          if (this.breadcumbLists[i].deptcode === id) {
            break
          }
        }
        this.breadcumbLists = dlist
      }
      this.getList(id)
    },
    _loadChildrens(o) {
      debugger
      this.breadcumbLists.push(o)
      this.getList(o.deptcode) // 取下一层部门的数据，需要传deptcode的值
    },
    _AgreeSelected(o) {
      if ((this.breadcumbLists.length === 0) || (this.breadcumbLists.length > 0 && this.breadcumbLists[this.breadcumbLists.length - 1].deptid !== o.deptid)) {
        this.breadcumbLists.push(o)
      }
      this.$emit('AgreeSelected', { value1: o, value2: this.breadcumbLists })
    },
    getList(id) {
      var $this = this
      var data = {
        deptid: id
      }
      deptApi.getChildrenList(data, null).then(res => {
        debugger
        if (res.code === 200) {
          $this.deptLists = res.data
        } else {
          this.$notice.error(1, res.message)
        }
      })
    }
  }
}
</script>

<style scoped>
  .DepartmentTree{
    margin:0;
    padding:0;
    background:#ffffff
  }

  .DepartmentTree li {
    list-style: none;
    padding: 7px;
    border-bottom: #efecec solid 1px
  }
  .DepartmentTree li:hover {
    background: #f4f4f4
  }
  .DepartmentTree ul {
    background: #ffffff;
    padding: 0;
    margin: 0;
  }
</style>
